<template>
  <section class="container">
    <!-- 导航 -->
    <el-row class="navigation" type="flex">
      <div @click="$router.push('/hotel')">
        酒店&nbsp;<span class="el-icon-arrow-right"></span>&nbsp;
      </div>
      <div @click="$router.push('/hotel?cityName=' + hotelInfo.city.name)">
        {{ hotelInfo.newCityName }}酒店&nbsp;<span
          class="el-icon-arrow-right"
        ></span
        >&nbsp;
      </div>
      <div class="notFontWeight">{{ hotelInfo.name }}</div>
    </el-row>
    <!-- 地址 -->
    <el-row class="address">
      <el-col>
        <div class="addressInfo">
          <div class="addressName">
            <span class="hotel">{{ hotelInfo.name }}</span>
            <p>{{ hotelInfo.alias }}</p>
          </div>
          <span v-if="data && hotelInfo.hotellevel">
            <i
              class="iconfont iconhuangguan"
              v-for="(item, index) in hotelInfo.hotellevel.arrLevel"
              :key="index"
            ></i>
          </span>
        </div>

        <!-- <span v-if="data"></span> -->
        <div class="location">
          <span class="el-icon-location"></span>{{ hotelInfo.address }}
        </div>
      </el-col>
    </el-row>

    <!-- 展示图片 -->

    <el-row type="flex" class="banner" justify="space-between">
      <el-col :span="15">
        <img :src="srcImg" width="640" height="360" />
      </el-col>
      <el-col :span="8" class="img">
        <img
          src="@/static/1.jpeg"
          @mouseenter="srcImg = '/_nuxt/static/1.jpeg'"
        />
        <img
          src="@/static/2.jpeg"
          @mouseenter="srcImg = '/_nuxt/static/2.jpeg'"
        />
        <img
          src="@/static/3.jpeg"
          @mouseenter="srcImg = '/_nuxt/static/3.jpeg'"
        />
        <img
          src="@/static/4.jpeg"
          @mouseenter="srcImg = '/_nuxt/static/4.jpeg'"
        />
        <img
          src="@/static/5.jpeg"
          @mouseenter="srcImg = '/_nuxt/static/5.jpeg'"
        />
        <img
          src="@/static/6.jpeg"
          @mouseenter="srcImg = '/_nuxt/static/6.jpeg'"
        />
      </el-col>
    </el-row>

    <!-- 价格比较 -->
    <el-table :data="tableData" style="width: 100%" class="price">
      <el-table-column prop="name" label="价格来源" width="400">
      </el-table-column>
      <el-table-column prop="bestType" label="低价房源" style="width: 100%">
      </el-table-column>
      <el-table-column prop="price" label="最低价格/每晚" width="180">
        <template slot-scope="scope">
          <div class="bestPrice">
            ￥{{ scope.row.price }} <span class="normalColor">起</span>
            <span class="el-icon-arrow-right"></span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 地图 -->
    <DetailMap v-if="hotelInfo.address" :hotelInfo="hotelInfo" />
    <!-- 酒店信息 -->
    <div class="hotelInfo">
      <el-row type="flex" class="common" justify="center" align="middle">
        <el-col :span="4">基本信息</el-col>
        <el-col :span="20">
          <el-row type="flex" class="baseInfo">
            <el-col>入住时间: 14:00之后</el-col>
            <el-col>离店时间: 12:00之前</el-col>
            <el-col
              >{{ hotelInfo.creation_time }} /
              {{ hotelInfo.renovat_time }}</el-col
            >
            <el-col>酒店规模: {{ hotelInfo.roomCount }}间客房</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row
        type="flex"
        justify="start"
        align="middle"
        class="common mianFacility"
      >
        <el-col :span="4">主要设施</el-col>
        <el-col :span="20">
          <el-row type="flex" class="FacilityList">
            <span v-for="item in hotelInfo.hotelassets" :key="item.id">{{
              item.name
            }}</span>
          </el-row>
        </el-col>
      </el-row>
      <el-row type="flex" class="common" align="middle">
        <el-col :span="4">停车服务</el-col>
        <el-col :span="20">-</el-col>
      </el-row>
      <el-row type="flex" class="common" align="middle">
        <el-col :span="4">品牌信息</el-col>
        <el-col v-if="hotelInfo.hotelbrand" :span="20">{{
          hotelInfo.hotelbrand.name
        }}</el-col>
      </el-row>
    </div>
    <!-- 好评 -->
    <div class="commentWrapper">
      <h1>{{ hotelInfo.all_remarks }}条真实用户评论</h1>
      <el-row type="flex" justify="start" align="middle">
        <el-col class="commentData" :span="4">
          <p>总评数: {{ hotelInfo.all_remarks }}</p>
          <p>好评数: {{ hotelInfo.good_remarks }}</p>
          <p>差评数: {{ hotelInfo.bad_remarks }}</p>
        </el-col>
        <el-col :span="6">
          <el-rate
            v-model="value"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}分"
          >
          </el-rate>
        </el-col>
        <div class="recommend">推荐</div>
        <el-col :span="3"
          ><span class="yellow"
            ><el-progress
              :class="{
                text: hotelInfo.scores.environment === null,
              }"
              v-if="data"
              :format="format"
              :width="70"
              :stroke-width="2"
              type="circle"
              :percentage="
                hotelInfo.scores.environment
                  ? (hotelInfo.scores.environment / 10) * 100
                  : 0
              "
              :color="color"
              :show-text="true"
            ></el-progress
            >环境</span
          ></el-col
        >
        <el-col :span="3"
          ><span class="yellow"
            ><el-progress
              :class="{
                text: hotelInfo.scores.product === null,
              }"
              v-if="data"
              :format="format"
              :width="70"
              :show-text="true"
              :stroke-width="2"
              type="circle"
              :percentage="
                hotelInfo.scores.product
                  ? (hotelInfo.scores.product / 10) * 100
                  : 0
              "
              :color="color"
            ></el-progress
            >产品</span
          ></el-col
        >
        <el-col :span="3"
          ><span class="yellow"
            ><el-progress
              :class="{
                text: hotelInfo.scores.service === null,
              }"
              v-if="data"
              :format="format"
              :width="70"
              :show-text="true"
              :stroke-width="2"
              :color="color"
              type="circle"
              :percentage="
                hotelInfo.scores.service
                  ? (hotelInfo.scores.service / 10) * 100
                  : 0
              "
            ></el-progress
            >服务</span
          ></el-col
        >
      </el-row>
    </div>

    <div class="allComment">
      <div class="commentLine">
        <div class="count" v-if="data && commentLength > 0">
          全部点评{{ commentLength }}条
        </div>
        <div class="count" v-else>暂无评论</div>
        <!-- <span></span> -->
      </div>
      <div class="myComment">
        <el-button
          slot="reference"
          @click="$router.push('/hotel/score?id=' + $route.query.id)"
          ><i class="add">+</i>写评论</el-button
        >
      </div>
    </div>
    <!-- 评论模块 -->
    <DetailComment
      v-if="data"
      :id="hotelInfo.id"
      :commentLength="commentLength"
    />
  </section>
</template>

<script>
import DetailComment from "@/components/hotel/DetailComment";
import DetailMap from "@/components/hotel/DetailMap";
export default {
  data() {
    return {
      color: "#ff9900",
      commentLength: "",
      srcImg: "/_nuxt/static/1.jpeg",
      hotelInfo: {},
      value: 3.7,
      tableData: [],
      data: "",
    };
  },
  components: {
    DetailComment,
    DetailMap,
  },

  created() {
    this.$axios({
      url: "/hotels",
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      let data = res.data.data[0];
      this.data = res.data;

      //1.改造获取的数据 根据星级长度 构造一个数组 用来遍历星级显示
      //  1.1 根据星级长度 构造一个数组 使用Array(数组的长度).fill(填充的数组元素) 创建指定长度的且含有参数数组
      // 判断是否存在星级 再进行将星级数字转化为数组

      if (data.hotellevel) {
        let arrLevel = new Array(data.hotellevel.level).fill(1);
        //  1.2 改造获取的数据 加入新属性
        data.hotellevel.arrLevel = arrLevel;
      }

      // 处理数据再绑定本地data
      data = {
        ...data,
        newCityName: data.city.name.replace(/市$/, ""),
      };
      // 获取酒店信息
      this.hotelInfo = data;

      // 获取不同网站的价格信息
      this.tableData = data.products;
      // 推荐的评论星级
      this.value = data.stars;
      //获取坐标位置
    });

    this.$axios({
      url: "/hotels/comments",
      params: {
        hotel: this.$route.query.id,
      },
    }).then((res) => {
      this.commentLength = res.data.data.length;
    });
  },

  methods: {
    sentData(data) {
      console.log(data, "data");
      this.hotelInfo = data;
    },
    format(percentage) {
      if (percentage === 0) {
        return "暂无评论";
      } else {
        return (percentage / 10).toFixed(1);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  .navigation {
    margin: 14px 0;
    font-size: 14px;
    div {
      font-weight: 700;
      cursor: pointer;
      .el-icon-arrow-right {
        font-weight: normal;
        color: #888;
      }
    }
    .notFontWeight {
      font-weight: normal;
      color: #888;
      cursor: auto;
    }
  }
  .address {
    margin-bottom: 20px;
    .addressInfo {
      display: flex;
      align-items: center;
      .iconhuangguan {
        color: #ff9900;
      }
      .addressName {
        margin-right: 10px;
        .hotel {
          font-size: 24px;
          margin-right: 10px;
        }
      }
    }

    .location {
      padding-top: 10px;
      font-size: 14px;
      color: #888;
      .el-icon-location {
        font-size: 16px;
        color: #666666;
      }
    }
  }
  .banner {
    margin: 40px 0;
    height: 360px;
    object-fit: cover;
    .img {
      display: flex;
      justify-content: space-between;
      align-content: space-between;
      flex-wrap: wrap;
      //   padding: 10px 5px;
      img {
        display: block;
        height: 110px;
        width: 160px;
      }
    }
  }
  .price {
    .bestPrice {
      color: #ff9900;
      font-size: 16px;
      .normalColor {
        color: #333;
        font-size: 14px;
      }
    }
  }

  .hotelInfo {
    margin-bottom: 40px;
    .common {
      font-size: 14px;
      padding: 20px 0;
      padding-left: 10px;
      border-bottom: 1px solid #e4e4e4;
    }
    .baseInfo {
      color: #888;
    }
    .mianFacility {
      .FacilityList {
        span {
          background-color: #e4e4e4;
          color: #888;
          height: 24px;
          line-height: 24px;
          border-radius: 4px;
          padding: 0 10px;
          margin-right: 10px;
        }
      }
    }
  }
  .allComment {
    margin-bottom: 10px;
    border-bottom: 1px solid #e4e4e4;
    display: flex;
    justify-content: space-between;
    .commentLine {
      width: 230px;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      .count {
        font-weight: 700;
        font-size: 16px;
      }
    }
    .myComment {
      margin-bottom: 10px;

      /deep/ .el-button {
        padding: 12px 13px;
        background-color: #ffb200;

        span {
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 52px;
          height: 12px;
          .add {
            display: block;
            width: 20px;
            height: 22px;
            font-size: 24px;
            margin-right: 4px;
            display: block;
          }
        }
      }
    }
  }

  .commentWrapper {
    position: relative;
    margin-bottom: 20px;
    padding-right: 20px;
    .el-rate {
      position: absolute;
      top: 22px;
      z-index: 2;
    }
    /deep/ .el-icon-star-on {
      font-size: 22px;
    }
    /deep/ .el-rate__icon {
      margin-right: 0px;
    }
    /deep/.el-rate__text {
      padding-left: 4px;
    }
    .recommend {
      position: absolute;
      top: -2px;
      left: 182px;
      width: 70px;
      height: 70px;
      line-height: 70px;
      text-align: center;
      border-radius: 50%;
      border: 2px solid #ffe6c1;
      color: #ffe6c1;
      font-size: 24px;
      transform: rotateZ(-30deg);
      opacity: 0.8;
      z-index: 1;
    }
    h1 {
      font-size: 16px;
      margin: 20px 0;
    }
    .commentData {
      color: #888;
    }
    .yellow {
      color: #ffb444;
    }
  }
  /deep/ .el-progress__text {
    color: #ff9900;
    font-size: 16px !important;
  }
  .text {
    /deep/ .el-progress__text {
      color: #d5d1d1;
      font-size: 14px !important;
    }
  }
}
</style>